<template>
   <el-breadcrumb separator="/">
      <el-breadcrumb-item
        v-for="(item,index) in breadList"
        :key="index"
      >
      <router-link :to="item.redirect||item.path" v-if="breadList.length<3">{{item.meta.title}}</router-link>
      <span v-else @click="go(item)">{{item.meta.title}}</span>
    </el-breadcrumb-item>
    </el-breadcrumb>
 
</template>
<script>
import { watch,onMounted,ref,reactive } from 'vue'
import { useRoute,useRouter } from "vue-router"
export default{
    setup(props,context){
        const route = useRoute()
        const router = useRouter()
        const breadList = ref([])
         const matched =ref(route.matched)
         console.log(matched);
      const getBreadCom = () => {
  let mached = route.matched.filter(item => item.meta && item.meta.title)
  //判断第一个是否是首页,如果不是 构造一个
  const first = mached[0]
  if (first.path !== '/dashboard') {
    mached = [{ path: '/dashboard', meta: { title: '首页' } }].concat(mached)
  }
  breadList.value = mached
}
const go=(item)=>{
  if(item.path !== '/dashboard'){
    return
  }
  router.push(item.path)
}
getBreadCom()
// 监听路由发生变化,重新获取面包屑导航数据
watch(()=>route.path,()=>getBreadCom())
        // const getBreadcrumb=()=>{
        //     breadList.value= matched.value
        //     console.log(breadList.value);
        // }
        // onMounted(()=>{
        //     getBreadcrumb()
        // })
        // // 监听路由变化时触发
        // watch( route,(newValue,oldValue) => {
        //     console.log(newValue,oldValue);
        //     breadList.value = newValue.matched;
        //     console.log(111);
        // },{immediate: true },{deep:true})
  
        return{
            route,breadList,matched,router,getBreadCom,go
        }
    }
}
</script>
<style >
    .el-breadcrumb span:nth-child(1) .el-breadcrumb__inner{
    color: #000;
    font-weight: bolder;
    cursor: pointer;
  }



</style>